<template>
	<view class="container">
		<view class="cu-card case">
			<view class="cu-item shadow padding">
				<view class="text-black text-bold text-lg">
					<text>01</text>
					<text>请选择您要反馈的问题</text>
				</view>
				<radio-group class="margin-top-xs block" @change="RadioChange">
					<view class="cu-form-group justify-start margin-top">
						<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
						<view class="title margin-left-xs">定位问题</view>
					</view>
					<view class="cu-form-group justify-start margin-top">
						<radio :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
						<view class="title margin-left-xs">定位问题</view>
					</view>
					<view class="cu-form-group justify-start margin-top">
						<radio :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false" value="B"></radio>
						<view class="title margin-left-xs">定位问题</view>
					</view>
				</radio-group>
			</view>
			<view class="cu-item shadow padding">
				<view class="text-black text-bold text-lg">
					<text>02</text>
					<text>问题反馈/描述</text>
				</view>
				<view class="margin-top-xs text-sm text-gray">
					请描述具体建议/问题发生过程,越详细越能高效处理哦~
				</view>
				<textarea maxlength="-1" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
			</view>
			<view class="cu-item shadow padding">
				<view class="text-black text-bold text-lg">
					<text>02</text>
					<text>请将您遇到的问题图片上传</text>
				</view>
				<view class="margin-top-xs text-sm text-gray">
					有效的图片信息有利于定位解决问题哦~
				</view>
				<view class="margin-top-xs grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids " @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-sm flex flex-direction">
			<button @click="handleAdd" class="cu-btn bg-green margin-tb-sm lg">
				<text class="cuIcon-add margin-right-xs"></text>
				提交</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	const radio = ref('')
	const RadioChange = (e: any) => {
		radio.value = e.detail.value
	}
	const textareaAValue = ref('')
	const textareaAInput = (e: any) => {
		textareaAValue.value = e.detail.value
	}
	const imgList = ref([])
	const ChooseImage = () => {
		uni.chooseImage({
			count: 4, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: (res: any) => {
				if (imgList.value.length != 0) {
					imgList.value = imgList.value.concat(res.tempFilePaths)
				} else {
					imgList.value = res.tempFilePaths
				}
			}
		});
	}
	const DelImg = (e: any) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除这张图片?',
			cancelText: '取消',
			confirmText: '删除',
			success: (res: any) => {
				if (res.confirm) {
					imgList.value.splice(e.currentTarget.dataset.index, 1)
				}
			}
		})
	}
	onShow(() => {

	});
	onPullDownRefresh(() => {

	});
</script>

<style></style>
